<template>
  <div class="square-list-item">
    <div class="item-content" @click="handleTaskDetail">
      <div class="left-content">
        <span @click="handleTaskDetail">
          <img :src="userInfo?.userBust" />
        </span>
      </div>
      <div class="middle-content">
        <div class="content-head">
          <span @click="handleTaskDetail" class="head-title">{{ userInfo?.nickname }}</span>
        </div>
        <div class="content-body">
          <div class="project-period">{{ userInfo?.userVita || '这个人很懒，什么都没留下' }}</div>
        </div>
        <div class="content-foot">
          <span>{{ userInfo?.userEmail }}</span>
          <span>|</span>
          <span>{{ userInfo?.phoneNumber }}</span>
        </div>
      </div>
      <div
        class="right-content"
        v-if="
          props.task.taskState == 1 && props.project?.userId === useUserStore().userMessage.userId
        "
      >
        <el-button
          type="success"
          plain
          @click.stop="chooseTakePartIn(props.userId, userInfo?.nickname || '')"
          >选为参与者</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getUserInfoById } from '@/service/user/user.ts'
import { ref } from 'vue'
import useUserStore from '@/store/user/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { updateTaskDetail } from '@/service/taskdetail/taskdetail'
const router = useRouter()
const props = defineProps<{
  userId: string
  task: any
  project: any
}>()
// 获取用户信息
interface User {
  userId: string
  nickname: string
  userBust: string
  userEmail: string
  phoneNumber: string
  userVita: string
}
const emit = defineEmits(['updateTask'])
const userInfo = ref<User | null>(null)
getUserInfoById(props.userId).then((res: any) => {
  userInfo.value = res.data
})
// 设置在新页面打开
const href = router.resolve({
  path: '/main/users/' + props.userId
})
const handleTaskDetail = () => {
  window.open(href.href)
}
const chooseTakePartIn = (userId: string, nickname: string) => {
  ElMessageBox.confirm(`确定选择"${nickname}"作为参与者吗?`, '再次确认')
    .then(async () => {
      try {
        emit('updateTask', userId)
        await updateTaskDetail(props.task)
        ElMessage({
          type: 'success',
          message: `选择"${nickname}"作为参与者成功`
        })
      } catch (error) {
        ElMessage({
          type: 'error',
          message: `选择"${nickname}"作为参与者失败: ${error}`
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消选择'
      })
    })
}
</script>

<style lang="less" scoped>
.square-list-item {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #eff2f7;
  border-bottom: 1px solid #eff2f7;
  .item-content {
    display: flex;
    cursor: pointer;
    .left-content {
      margin-right: 20px;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: #dcdfe6 1px solid;
      }
    }
    .middle-content {
      width: 100%;
      .content-head {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        .head-title {
          max-width: 460px;
          color: #273444;
          font-size: 17px;
          font-weight: 500;
        }
      }
      .content-body {
        margin: 15px 0;
        display: flex;
        flex-wrap: wrap;
        .project-period {
          white-space: nowrap;
          display: flex;
          align-items: flex-start;
          width: 100%;
          color: #8796a8;
          text-align: left;
        }
      }
      .content-foot {
        color: #8796a8;
        span {
          margin-right: 10px;
        }
      }
    }
    .right-content {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .el-button {
        margin-left: 20px;
      }
    }
  }
}
.square-list-item:hover {
  background-color: #f0f2f5;
}
</style>
